<template>
    <div class="sdy-register">
        <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="$router.back()" />
        <div v-if="active === 0" class="test-tel" style="margin-top: 20px;">
            <van-form @failed="telFailedHandler" @submit="telSubmitHandler">
                <van-cell-group inset>
                    <van-field v-model="tel" label="手机号" label-width="100px" name="pattern" placeholder="请填写手机号"
                        :rules="[{ pattern: /^\d{11}$/, message: '请输入正确手机号' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        验证手机号
                    </van-button>
                </div>
            </van-form>
        </div>

        <div v-if="active === 1" class="test-code">
            <van-form @failed="codeFailedHandler" @submit="codeSubmitHandler">
                <van-cell-group inset>
                    <!-- 通过 pattern 进行正则校验 -->
                    <van-field v-model="code" label="验证码" label-width="100px" name="pattern" placeholder="请填写验证码"
                        :rules="[{ pattern: /^\d{5}$/, message: '请输入正确验证码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button @click="getCodeHandler" round type="primary" native-type="button">
                        获取验证码
                    </van-button>
                    <van-button round type="primary" native-type="submit">
                        下一步
                    </van-button>
                </div>
            </van-form>
        </div>

        <div v-if="active === 2" class="register-box">
            <van-form @failed="regiFailedHandler" @submit="regiSubmitHandler">
                <van-cell-group inset>
                    <van-field v-model="tel" label="手机号" label-width="100px" name="pattern" placeholder="请填写手机号"
                        :rules="[{ pattern: /^\d{11}$/, message: '请输入正确手机号' }]" />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field v-model="password" label="密码" label-width="100px" name="pattern" placeholder="请填写密码"
                        :rules="[{ pattern: /^\w{6,12}$/, message: '请输入正确密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        确认注册
                    </van-button>
                </div>
            </van-form>
        </div>

        <div v-if="active === 3" class="finish-box">
            <van-icon class="finish-icon" name="checked" />
            <p>注册成功</p>
            <router-link to="">去登录</router-link>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { showFailToast, showSuccessToast } from 'vant'
import { ref } from 'vue'
import { checkedTel, getCode, checkedCode, register } from '@/api/register'

interface ResponseInfo {
    code: string
    message: string
}

const active = ref<number>(0)

// 验证手机号的逻辑
// 准备一个变量, 表示手机号
const tel = ref<string>('')

// 表单验证成功的方法
const telSubmitHandler = async () => {
    // 发送请求
    const res = await checkedTel(tel.value)

    // 根据结果判断
    // 表示被注册过, 该手机号不能使用
    if ((res as unknown as ResponseInfo).code === '10005') {
        showFailToast('手机号已注册\n请直接登录')
        return
    }

    // 代码来到这里, 表示没有注册过
    // 可以进入下一步
    // 让 active++
    active.value = 1
}
// 表单验证失败的方法
const telFailedHandler = () => {
    showFailToast('请按照要求填写手机号')
}

// 验证验证码的逻辑
// 准备一个变量, 表示验证码
const code = ref<string>('')

// 获取验证码的方法
const getCodeHandler = async () => {
    // 发送请求获取验证码
    const res = await getCode(tel.value)
    showSuccessToast(`验证码已发送\n${res.data}`)

}

// 表单验证成功的方法
const codeSubmitHandler = async () => {
    // 验证验证码是否正确
    const res = await checkedCode(tel.value, code.value)

    // 表示验证码不正确
    if ((res as unknown as ResponseInfo).code === '10007') {
        showFailToast('验证码不正确')
        return
    }

    // 代码执行到这里, 表示验证码正确
    active.value = 2
}
// 表单验证失败的方法
const codeFailedHandler = () => {
    showFailToast('请按照要求填写验证码')
}

// 确认注册的逻辑
// 准备一个变量表示密码
const password = ref<string>('')

// 表单验证成功的方法
const regiSubmitHandler = async () => {
    // 发送请求进行注册
    await register(tel.value, password.value)
    showSuccessToast('注册成功')

    // 进入到下一个环节
    active.value = 3
}

// 表单验证失败的方法
const regiFailedHandler = () => {
    showFailToast('请按照要求填写表单')
}

</script>
  
<style lang="scss" scoped>
.finish-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    >p {
        margin: 10px 0;
        color: green;
    }
}

.finish-icon {
    font-size: 100px;
    color: green;
    display: block;
}
</style>
  